<template>
  <div class="school">
    <div class="alert">
      <span>通过学校信息找回账号适用于：账号是学校提供的，学生在系统中有真实姓名，且已加入正确的班级。</span>
    </div>
    <div class="inputBox">
      <span class="name">学生姓名：</span>
      <el-input
        @focus="studentFalse=false"
        @blur="studentVerify"
        v-model="student"
        placeholder="请输入学生姓名">
      </el-input>
      <p class="verify"><span v-show="studentFalse" v-text="studentRule"></span></p>
<!--  省    -->
      <div class="provinceBox">
        <span class="name">学校省份：</span>
        <el-select
          v-model="province"
          placeholder="请选择学校省份"
          @focus="provinceFalse=false"
          @change="provinceVerify">
          <el-option
            v-for="(item,index) in provinceList"
            :key="index"
            :label="item.provinceName"
            :value="item.provinceCode">
          </el-option>
        </el-select>
        <p class="verify"><span v-show="provinceFalse" v-text="provinceRule"></span></p>
      </div>
<!--  市    -->
      <div class="cityBox" v-if="province">
        <span class="name">学校市区：</span>
        <el-select
          v-model="city"
          placeholder="请选择学校市区"
          @focus="cityFalse=false"
          @change="cityVerify">
          <el-option
            v-for="(item,index) in cityList"
            :key="index"
            :label="item.areaName"
            :value="item.areaCode">
          </el-option>
        </el-select>
        <p class="verify"><span v-show="cityFalse" v-text="cityRule"></span></p>
      </div>
<!--  学校    -->
      <div class="schoolBox" v-if="city">
        <span class="name">学校：</span>
        <el-select
          v-model="school"
          filterable
          placeholder="请选择所在学校"
          @focus="schoolFalse=false"
          @change="schoolVerify">
          <el-option
            v-for="(item,index) in schoolList"
            :key="index"
            :label="item.schoolName"
            :value="item.id">
          </el-option>
        </el-select>
        <p class="verify"><span v-show="schoolFalse" v-text="schoolRule"></span></p>
      </div>
<!--  年级    -->
      <div class="gradeBox" v-if="school">
        <span class="name">年级：</span>
        <el-select
          v-model="grade"
          placeholder="请选择所在年级"
          @focus="gradeFalse=false"
          @change="gradeVerify">
          <el-option
            v-for="(item,index) in gradeList"
            :key="index"
            :label="item.gradeName"
            :value="item.gradeYear">
          </el-option>
        </el-select>
        <p class="verify"><span v-show="gradeFalse" v-text="gradeRule"></span></p>
      </div>
<!--  班级    -->
      <div class="classBox" v-if="grade">
        <span class="name">班级：</span>
        <el-select
          v-model="pClass"
          placeholder="请选择所在班级"
          @focus="classFalse=false"
          @change="classVerify">
          <el-option
            v-for="(item,index) in classList"
            :key="index"
            :label="item.className"
            :value="item.classId">
          </el-option>
        </el-select>
        <p class="verify"><span v-show="classFalse" v-text="classRule"></span></p>
      </div>
    </div>
    <div class="btn">
      <el-button @click="confirmFind">确认</el-button>
    </div>
    <aside>
      <el-dialog
        :visible.sync="isOpenDialog"
        width="70%"
        :show-close="false"
        :close-on-click-modal="false">
        <div style="max-height: 600px;overflow:auto;">
          <successAccount
            :accountList="accountList"
            :findResult="findResult"/>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="isOpenDialog = false">确 定</el-button>
        </span>
      </el-dialog>
    </aside>
  </div>
</template>

<script>
    import { getProvinceList, getCityList, getSchoolList, getGradeList, getClassList,  } from '../../../../../api/common.js'
    import { getAccountBySchool  } from '../../../../../api/getBack.js'
    import successAccount from '../successAccount.vue'
    export default {
        name: "school",
        props: {
            isRuleFalse: Boolean
        },
        data() {
            return {
                // 学校信息
                studentFalse: false,
                studentRule: '',
                student: '',
                // 省
                province: '',
                provinceList: [],
                provinceFalse: false,
                provinceRule: '',
                // 市
                city: '',
                cityList: [],
                cityFalse: false,
                cityRule: '',
                // 学校
                school: '',
                schoolList: [],
                schoolFalse: false,
                schoolRule: '',
                // 年级
                grade: '',
                gradeList: [],
                gradeFalse: false,
                gradeRule: '',
                // 班级
                pClass: '',
                classList: [],
                classFalse: false,
                classRule: '',
                // 学生账户
                findResult: '账号找回成功',
                accountList: [
                    // {
                    //     account: "yang",
                    //     mobile: "13145310973",
                    //     qqNickName: "",
                    //     realName: "杨前磊",
                    //     schoolId: 6152,
                    //     schoolName: "兰州市五十三中",
                    //     wxNickName: "",
                    // },
                ],
                isOpenDialog: false,
            }
        },
        created() {
            this.getProvince(); // 获取省份
        },
        components: {
            successAccount
        },
        methods: {
            // 切换tabs时清空验证规则
            clearRules() {
                this.studentFalse = false;
            },
            // 联级
            clearInput(name) {
              switch (name) {
                  case 'province':
                      this.city = '';
                      this.school = '';
                      this.grade = '';
                      this.class = '';
                      break;
                  case 'city':
                      this.school = '';
                      this.grade = '';
                      this.class = '';
                      break;
                  case 'school':
                      this.grade = '';
                      this.class = '';
                      break;
                  case 'grade':
                      this.class = '';
                      break;
              }
            },
            // 获取省份列表
            async getProvince() {
                const res = await getProvinceList({
                    include: 0,
                    common: 1
                });
                if(res.data.status) {
                    this.provinceList = res.data.data;
                }
            },
            // 校验学校信息
            studentVerify() {
                if(this.student) {
                    this.studentFalse = false;
                }else{
                    this.studentRule = '学生姓名不可为空';
                    this.studentFalse = true;
                }
            },
            // 选择 省
            async provinceVerify() {
                console.log(this.province);
                this.clearInput('province');
                if(this.province) {
                    this.provinceFalse = false;
                    const res = await getCityList({
                       'parentAreaCode': this.province
                    });
                    if(res.data.status) {
                        console.log(res.data);
                        this.cityList = res.data.data;
                    }
                }else{
                    this.provinceRule = '请选择学校省份';
                    this.provinceFalse = true;
                }
            },
            // 选择 市
            async cityVerify() {
                console.log(this.city);
                this.clearInput('city');
                if(this.city) {
                    this.cityFalse = false;
                    const res = await getSchoolList({
                        "keyWord":"",
                        "provinceCode": this.province,
                        "cityCode": this.city,
                        "areaCode":""
                    });
                    if(res.data.status) {
                        this.schoolList = res.data.data;
                    }
                }else{
                    this.cityRule = '请选择学校市区';
                    this.cityFalse = true;
                }
            },
            // 选择 学校
            async schoolVerify() {
                console.log('学校id'+this.school);
                this.clearInput('school');
                if(this.school) {
                    this.schoolFalse = false;
                    const res = await getGradeList({
                        'include': 0
                    });
                    if(res.data.status) {
                        this.gradeList = res.data.data;
                    }
                }else{
                    this.schoolRule = '请选择所在学校';
                    this.schoolFalse = true;
                }
            },
            // 选择 年级
            async gradeVerify() {
                console.log(this.grade);
                this.clearInput('grade');
                if(this.grade) {
                    this.gradeFalse = false;
                    const res = await getClassList({
                        'schoolId': this.school,
                        'grade': this.grade,
                    });
                    if(res.data.status) {
                        this.classList = res.data.data;
                    }
                }else{
                    this.gradeRule = '请选择所在年级';
                    this.gradeFalse = true;
                }
            },
            // 选择 班级
            async classVerify() {
                console.log('班级id'+this.pClass);
                if(this.pClass) {
                    this.classFalse = false;

                }else{
                    this.classRule = '请选择所在班级';
                    this.classFalse = true;
                }
            },
            // 确认
            async confirmFind() {
                // 校验学校
                this.studentVerify();
                let flag = this.province&&this.city&&this.school&&this.grade&&this.pClass;
                if(flag) {
                    const res = await getAccountBySchool({
                        "schoolId": this.school,
                        "classId": this.pClass,
                        "realName": this.student
                    });
                    if(res.data.status) {
                        this.findResult = '账号找回成功';
                        this.accountList = res.data.data;
                        this.isOpenDialog = true;
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../../../../styles/common.scss';
  .school{
    .alert{
      text-align: center;
      span{
        display: inline-block;
        background-color: #fff6e8;
        color: #ff7f21;
        border-radius: 5px;
        padding: 4px 16px;
        text-align: center;
      }
    }
    .inputBox{
      width: 50%;
      margin: 20px auto 0;
      span.name{
        display: inline-block;
        width: 26%;
        text-align: center;
      }
      .el-input,.el-select{
        display: inline-block;
        width: 73%;
        margin: 3px 0;
      }
      p.verify{
        height: 18px;
        margin-left: 27%;
        span{
          color: #f00;
        }
      }
      a{
        display: block;
        text-align: right;
        color: #2e86ff;
        padding-right: 4px;
        cursor: pointer;
      }
      .el-button{
        margin: 4px auto 30px;
        display: block;
        width: 100%;
        background-color: #2e86ff;
        color: #fff;
      }
    }
    .btn{
      width: 50%;
      margin: 4px auto 0;
      padding-bottom: 60px;
      .el-button{
        width: 100%;
        background-color: #2f8efa;
        color: #fff;
      }
    }
  }
</style>